/*
  学习目标：React事件绑定
  语法: on+驼峰事件名= {函数名}
  注意: 💥事件绑定必须 是函数名, 而不能是函数的调用

*/

import React from 'react';

export default class App extends React.Component {
  // 2.1 定义一个事件处理函数
  handleClick() {
    console.log('123  ----->  ', 123);
    alert('hello 80');
  }

  render() {
    console.log('this  ----->  ', this);
    return (
      <div>
        <button
          // 1. 少量代码: 直接用箭头函数
          onClick={() => alert('hello React')}
        >
          点我干啥
        </button>

        <button
          // 2. 多行代码
          // 2.2 通过this绑定事件处理函数
          onClick={this.handleClick}
        >
          点我干啥2
        </button>

        <button
        // 注意: 一下都是错误写法
        //❌ onClick="this.handleClick"
        // 💥 onXxx绑定的是函数名, 而不能是函数的调用
        //❌ onClick={this.handleClick()}
        >
          点我干啥3
        </button>
      </div>
    );
  }
}
